{% extends 'users/profile.html' %}

{% block head %}

{% endblock %}

{% block users %}

{% endblock %}

{% block content_title %}
<li class="is-active"><a>修改密码</a></li>
{% endblock %}

{% block content %}

<form action="" method="post">
    <h1 class="title has-text-centered has-text-wight-bold is-size-2">修改密码</h1>
    <p style="margin-top: 1em;">
        <label for="id_password">新密码:</label>
        <input type="password" name="password" class="input is-link" placeholder="密码" minlength="8" maxlength="32" required id="id_password" value="{{ password }}">
    </p>
    <p style="margin-top: 1em;">
        <label for="id_password1">再次确认密码:</label>
        <input type="password" name="password1" class="input is-link" placeholder="密码" minlength="8" max="32" required id="id_password1" value="{{ password1 }}">
    </p>
    <div style="margin-top: 1em;">
        <label for="id_verification">验证码:</label>
        <div class="field has-addons">
            <div class="control">
                <input class="input is-link" type="text" minlength="6" maxlength="6" name="verification" id="id_verification" placeholder="验证码" required value="{{ verification }}">
            </div>
            <div class="control">
                <button type="button" class="button is-link" id="button">发送验证码</button>
            </div>
        </div>
    </div>
    <div class="is-pulled-left is-size-7 has-text-danger" style="margin-top: 1em;">
        <span>{{ error }}</span>
    </div>
    <div class="is-clearfix"></div>
    <input type="submit" style="margin-top: 1em;" class="button is-link is-fullwidth" value="提交">
</form>

{% endblock %}

{% block end %}
<script>
var btn = $("#button")[0];
var time = 120;
btn.addEventListener('click',function(){
    this.disabled = true;
    $.post("/users/send_email",
        {username:"",email:"",type:"change_password"},
        function(data,status){
            mui.alert("验证码发送成功,有效期20分钟");
            var timer = setInterval(function(){
                if(time == 0){
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = "发送验证码";
                    time = 120;
                } else {
                    btn.innerHTML = time + "秒之后重新发送";
                    time--;
                }
            },1000)
        },
        "text"
    )
})
</script>

{% endblock %}